<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>bct</title>
		<script src="../build/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../build/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../css/footer.css" />
		<link rel="stylesheet" type="text/css" href="../css/head.css">
		<script src="../build/jquery.min.js"></script>
		<script src="../build/jquery-ui.min.js"></script>
		<style>
			#language-block,
			#login-block {
				width: 100%;
				height: 100px;
				background-color: white;
				/*background-color: #00BFFF;*/
				opacity: .7;
				position: absolute;
				top: 60px;
				left: 0;
				overflow: hidden;
				display: none;
			}
			
			#language-style,
			#login-style {
				/*border: 1px solid red;*/
				position: absolute;
				top: 60px;
				left: 0;
				width: 100%;
				height: 100px;
				display: none;
			}
			
			#language-style p,
			#login-style p {
				margin-left: 91%;
				margin-top: 20px;
			}
			
			#language-style p:hover,
			#login-style p:hover {
				color: deepskyblue;
			}
			/**/
			
			* {
				margin: 0;
				padding: 0;
			}
			
			html,
			body {
				height: 100%;
				width: 100%;
				background: rgb(238, 238, 238);
			}
			
			#app {
				width: 50%;
				box-shadow: 0 0 6px rgba(0, 0, 0, .15);
				background: #fff;
				position: relative;
				padding: 2.5%;
				font-family: Helvetica, Arial, "Microsoft Yahei", "微软雅黑", STHeiti, "华文细黑", sans-serif;
				width: 50%;
				border: 1px solid #ccc;
				margin: auto;
			}
			
			#content {
				margin-top: 70px;
			}
			
			#app img {
				width: 100%;
			}
			#app .p1{
				margin: 10px 0;
				font-size: 25px;
				
			} 
			#app .p2{
				color: #999;
				zoom: 1;
				font-size: 15px;
				letter-spacing: 1px;
				font-style: italic;
				margin-bottom: 10px;
			} 
			#app .p3{
				
				zoom: 1;
				font-size: 16px;
				letter-spacing: 1px;
				margin-bottom: 20px;
				text-indent: 2em;
			} 
		</style>
	</head>

	<body>
		<header>
			<div class="header_top">
				<div class="header_log">
					<img src="../img/logo.png" alt="图片不在了">
				</div>

				<ul>
					<li id="product"><a href="">私生活</i></a></li>
					<li id="help"><a href="">小觅</a></li>
					<li id="cooperation"><a href="">SDENO</a></li>

					<li id="news"><a href="boke.html"><span style="color:rgb(0,173,238) ">博客</span></a></li>
					<li id="about-us"><a href="../aboutus/aboutus.html">社区</a></li>
					<li id="news"><a href="../news/news.html">关于我们</a></li>

				</ul>
			</div>

		</header>
		<div id="content">
			<div id="app">
				<bokes :data="data"></bokes>
			</div>
		</div>
		<template id="bokes">
			<div class="divclass">
				<img :src="data.imgurl" alt="" class="imgclass" />
				<br/>
				<p class='p1'>{{data.title}}</p>
				<p class='p2'>{{data.time}} / by {{data.author}},觅 / 未分类</p>
				<p class='p3'>
					{{data.content}}
				</p>
			</div>
		</template>
	</body>
	<script type="text/javascript">
	var datas = {};
	var id = window.location.href.split('=')[1];


		function getinfo() {
			$.get(
				"bokeadmin.php", {
					id:id,
				},
				function(data) {
					var data1 = JSON.parse(data);
					datas = data1;
					console.log(datas)
					start();

				}
			)
		};
	  getinfo();
	function start(){
		Vue.component('bokes', {
				template: '#bokes',
				props: ['data']
			})
			//创建根实例
		var vm = new Vue({
			el: '#app',
			data: datas
		})
	}
	</script>

</html>